<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset='UTF-8'>
    <meta name='referrer' content='always'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <title>Document</title>

    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" resize></canvas>

    <span onClick="click_create()">创建默认区域</span>
</body>

</html>

<script>


    paper.install(window);
    paper.setup('myCanvas');

    // 假设已知路径点数组，每个点是一个[x, y]数组
    var pathPoints = [
        new Point(50, 50),
        new Point(100, 50),
        new Point(150, 100),
        new Point(100, 150),
        new Point(50, 150)
    ];


    var pathPoints2 = [
        new Point(60, 60),
        new Point(100, 60),
        new Point(150, 100),
        new Point(100, 160),
        new Point(60, 160)
    ];








    let cur_path = null;
    let cur_text = null;


    let path_collection = [];//存放path的集合;
    let cur_text_collection = [];


    // 使用给定的路径点创建Path对象
    let path = new Path();
    path.strokeColor = 'black';
    path.fillColor = '#ccc';

    let path2 = new Path();

    path2.strokeColor = 'blue';
    path2.fillColor = '#ccc';


    var hitOptions = {
        segments: true,
        stroke: true,
        fill: true,
        tolerance: 10
    };

    var movePath = false;
    let selectedSegment = null;

    let self_type = "fill";  //fill  segment




    let obj = {
        text: "区域1",
        bg_color: "red",
        data_id:"0011",

        stroke_color: "green",
        pathPoints: [
            new Point(60, 60),
            new Point(100, 60),
            new Point(150, 100),
            new Point(100, 160),
            new Point(60, 160)
        ]
    };

    let obj2 = {
        text: "区域2",
        bg_color: "red",
        data_id:"0022",
        stroke_color: "green",
        pathPoints: [
            new Point(60, 60),
            new Point(100, 60),
            new Point(150, 100),
            new Point(100, 160),
            new Point(60, 160)
        ]
    };


    create_obj(obj);
    create_obj(obj2);

    function create_obj(obj) {

        let path = new Path();
        path.strokeColor = obj.stroke_color;
        path.fillColor = obj.bg_color;

        path.data_id=obj.data_id;


        for (var i = 0; i < obj.pathPoints.length; i++) {
            var point = pathPoints[i];

            if (i === 0) {
                path.moveTo(point);
            } else {
                path.lineTo(point);
            }
        }


        var center = path.bounds.center;

        console.log('center', center)

        let text = new PointText({
            point: center, // 将文本居中放置在路径区域中心
            content: obj.text,
            fillColor: 'green',
            justification: 'center' // 使文本在指定的区域中居中
        });

        text.dada_id=obj.data_id;

      

        console.log(" new PointText",text)

        // text.insertAbove();

        paper.view.update();

        path_collection.push(path);

        cur_text_collection.push(text);



    }


    function onMouseDrag(event) {
        console.log("onMouseDrag-event", event)
        // path.position += event.point;
        cur_path.position += event.point;
    }




    function click_create() {
        console.log("出发函数")
        create_path(null, pathPoints)
    }



    // 记录当前鼠标的位置
    let mouseDown = false;
    let offset = null;

    // 鼠标按下事件
    function onMouseDown(event) {

        console.log("event-onMouseDown", event)


        var hitResult = paper.project.hitTest(event.point, hitOptions);

        // console.log("hitResult-item-就是path", hitResult.item);
        console.log("hitResult-就是path", hitResult);

        if (hitResult) {
            cur_path = hitResult.item;
        }

        let d_id= hitResult.item.data_id;

        console.log("path--d_id", d_id);

        console.log("cur_text_collection_______*****",cur_text_collection);


        for(let i=0;i<cur_text_collection.length;i++){
            if(cur_text_collection[i].dada_id==d_id){
                console.log("命中")
                cur_text=cur_text_collection[i];
                break;
            }
        }

        console.log("path--d_id", d_id);
        console.log("path--cur_text", cur_text);

        // cur_text_collection.forEach((item,key)=>{
        //     console.log("item---",item)
        //     if(item.data_id==d_id){
        //         cur_text=item;
        //         console.log("命中",item)
        //     }
        // })

        console.log("当前的id是",d_id);

        

        selectedSegment = cur_path.getNearestLocation(event.point).segment;

        cur_path.strokeColor = 'green';

        // console.log("onMouseDown====>>hitResult", hitResult)

        if (hitResult.type === 'segment') {

            paper.view.onMouseDrag = onMouseDrag;

            self_type = 'segment';
            selectedSegment = cur_path.getNearestLocation(event.point).segment;
            // selectedSegment = path.getNearestLocation(event.point).segment;
            // selectedSegment = hitResult.segment;
            // path.point = event.point;
            // 开始拖动操作


        } else {

            mouseDown = true;

            paper.view.onMouseDrag = null;

            self_type = 'fill'
        }

    }

    // 鼠标移动事件
    function onMouseMove(event) {
        console.log("onMouseMove---into", mouseDown)
        if (mouseDown) {

            // console.log("event-onMouseMove", event)

            var hitResult = paper.project.hitTest(event.point, hitOptions);

            if (hitResult.type == null) {
                // mouseDown = false;
                return;
            }


            console.log("onMouseMove--hitResult*********move*********______", hitResult)
            console.log("onMouseMove--hitResult****", hitResult.type)


            console.log("移动的cur_text",cur_text)
            // cur_text.position = event.point.subtract(offset);

            if (hitResult.type == "segments") {
                // // mouseDown = false;
                // path.point = event.point;

                // selectedSegment.point = event.point;


            } else if (hitResult.type == "fill") {
                mouseDown = true;


                cur_path.position = event.point.subtract(offset);


                cur_text.position = event.point.subtract(offset);


            }

        }


    }

    // 鼠标抬起事件
    function onMouseUp(event) {
        mouseDown = false;

        selectedSegment = null;

    }


    // 监听鼠标移动事件
    function onMouseDrag(event) {
        if (self_type == 'segment') {
            selectedSegment.point = event.point;
        }



        // var hitResult = paper.project.hitTest(event.point,hitOptions);

        // if (hitResult.type == 'segments') {
        //     // 如果有点被按下，更新它的位置
        //     if (selectedSegment) {

        //     }
        // }


    }

    // 添加事件监听
    paper.view.onMouseDown = onMouseDown;
    paper.view.onMouseMove = onMouseMove;
    paper.view.onMouseUp = onMouseUp;

    // paper.view.onMouseDrag = onMouseDrag;

    //整体移动和


</script>